এইচটিএমএল (HTML) গ্রাফিক্স হলো ওয়েবপেজে ভিজ্যুয়াল কন্টেন্ট যোগ করার একটি উপায়। এটি বিভিন্ন ধরণের ডেটা বা তথ্যকে চিত্র, ড্রইং বা গ্রাফ আকারে উপস্থাপন করতে সহায়তা করে। এইচটিএমএলে গ্রাফিক্স ব্যবহারের মাধ্যমে কন্টেন্ট আরও ইন্টারঅ্যাকটিভ এবং দৃষ্টিনন্দন করা যায়।
HTML5-এর <canvas> ট্যাগ একটি গ্রাফিক্সের এলাকা তৈরি করতে ব্যবহৃত হয়, যেখানে JavaScript দিয়ে ড্রইং বা অ্যানিমেশন তৈরি করা যায়। এটি 2D এবং 3D গ্রাফিক্স রেন্ডারিংয়ের জন্য উপযুক্ত।
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 75);
</script>
উপরে, একটি নীল রঙের রেকটেংগেল তৈরি করা হয়েছে।
SVG বা Scalable Vector Graphics হলো একটি এক্সএমএল-ভিত্তিক ফরম্যাট, যা ভেক্টর গ্রাফিক্স উপস্থাপনের জন্য ব্যবহৃত হয়। এটি স্কেলযোগ্য এবং রেজোলিউশন স্বাধীন, অর্থাৎ গুণগত মান কমে না।
<svg width="200" height="100">
<rect width="150" height="75" style="fill:blue;stroke:black;stroke-width:5" />
</svg>
SVG-তে ভেক্টর-ভিত্তিক আকার তৈরি করা যায়, যেমন বৃত্ত, রেকটেংগেল এবং আরও অনেক কিছু।
CSS ব্যবহার করে HTML গ্রাফিক্স আরও স্টাইলিশ এবং ইন্টারঅ্যাকটিভ করা যায়। উদাহরণস্বরূপ, CSS-এর clip-path প্রোপার্টি দিয়ে গ্রাফিক্সকে বিশেষ আকৃতিতে কাটা যায়।
<div style="width:200px; height:100px; background:blue; clip-path: circle(50%);"></div>
এখানে, একটি নীল বৃত্ত তৈরি করা হয়েছে।
HTML গ্রাফিক্স ওয়েব উন্নয়নে গুরুত্বপূর্ণ ভূমিকা পালন করে, বিশেষ করে যখন ইন্টারঅ্যাকটিভ কন্টেন্ট তৈরি করতে হয়। এটি ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত করে।
এইচটিএমএল (HTML) গ্রাফিক্স হলো ওয়েবপেজে ভিজ্যুয়াল কন্টেন্ট যোগ করার একটি উপায়। এটি বিভিন্ন ধরণের ডেটা বা তথ্যকে চিত্র, ড্রইং বা গ্রাফ আকারে উপস্থাপন করতে সহায়তা করে। এইচটিএমএলে গ্রাফিক্স ব্যবহারের মাধ্যমে কন্টেন্ট আরও ইন্টারঅ্যাকটিভ এবং দৃষ্টিনন্দন করা যায়।
HTML5-এর <canvas> ট্যাগ একটি গ্রাফিক্সের এলাকা তৈরি করতে ব্যবহৃত হয়, যেখানে JavaScript দিয়ে ড্রইং বা অ্যানিমেশন তৈরি করা যায়। এটি 2D এবং 3D গ্রাফিক্স রেন্ডারিংয়ের জন্য উপযুক্ত।
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 75);
</script>
উপরে, একটি নীল রঙের রেকটেংগেল তৈরি করা হয়েছে।
SVG বা Scalable Vector Graphics হলো একটি এক্সএমএল-ভিত্তিক ফরম্যাট, যা ভেক্টর গ্রাফিক্স উপস্থাপনের জন্য ব্যবহৃত হয়। এটি স্কেলযোগ্য এবং রেজোলিউশন স্বাধীন, অর্থাৎ গুণগত মান কমে না।
<svg width="200" height="100">
<rect width="150" height="75" style="fill:blue;stroke:black;stroke-width:5" />
</svg>
SVG-তে ভেক্টর-ভিত্তিক আকার তৈরি করা যায়, যেমন বৃত্ত, রেকটেংগেল এবং আরও অনেক কিছু।
CSS ব্যবহার করে HTML গ্রাফিক্স আরও স্টাইলিশ এবং ইন্টারঅ্যাকটিভ করা যায়। উদাহরণস্বরূপ, CSS-এর clip-path প্রোপার্টি দিয়ে গ্রাফিক্সকে বিশেষ আকৃতিতে কাটা যায়।
<div style="width:200px; height:100px; background:blue; clip-path: circle(50%);"></div>
এখানে, একটি নীল বৃত্ত তৈরি করা হয়েছে।
HTML গ্রাফিক্স ওয়েব উন্নয়নে গুরুত্বপূর্ণ ভূমিকা পালন করে, বিশেষ করে যখন ইন্টারঅ্যাকটিভ কন্টেন্ট তৈরি করতে হয়। এটি ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত করে।
or
আপনি আমাকে যেকোনো প্রশ্ন করতে পারেন, যেমনঃ
Are you sure to start over?
